<template>

  <div>

    <Card>
      <Button class="margin-b-20"
              icon="md-add"
              type="primary"
              @click="onAddCardModal()">添加会员卡</Button>

      <Form ref="formSearch"
            inline>
        <!-- <FormItem label="卡品种">
          <RadioGroup v-model="formSearch.varieties"
                      @on-change="getCardList">
            <Radio :label="null"
                   border>全部</Radio>
            <Radio label="1"
                   border>会员卡</Radio>
            <Radio label="2"
                   border>体验卡</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="卡类型">
          <RadioGroup v-model="formSearch.type"
                      @on-change="getCardList">
            <Radio :label="null"
                   border>全部</Radio>
            <Radio label="1"
                   border>期限卡</Radio>
            <Radio label="2"
                   border>次数卡</Radio>
            <Radio label="3"
                   border>储值卡</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="卡名称">
          <Input style="width:300px"
                 search
                 enter-button
                 @on-search="getCardList"
                 v-model="formSearch.name"
                 placeholder="输入卡名称筛选" />
        </FormItem>
      </Form>
      <div class="badge-wrap"
           v-for="(item, index) in cardColumnsList"
           :key="index"
           @click="onAddCardModal(item)">
        <Badge :count="item.count"
               :overflow-count="99999">
          <div class="course-badge">{{item.name}}</div>
        </Badge>
      </div>
    </Card>
    <Modal v-model="addCardModel"
           :title="cardType ? '编辑会员卡' :'添加会员卡'"
           :loading="loading"
           :mask-closable="false"
           @on-ok="onCardSubmit"
           @on-visible-change="onAddCardVisible">
      <Form ref="cardform"
            :model="card"
            :rules="ruleValidate"
            :label-width="80">
        <!-- <FormItem label="卡品种"
                  prop="varieties">
          <Select v-model="card.varieties"
                  style="width:260px">
            <Option v-for="(item, index) in varietiesCard"
                    :value="item.value"
                    :key="index">{{ item.label }}</Option>
          </Select>
        </FormItem> -->
        <FormItem label="卡类型"
                  prop="type">
          <Select v-model="card.type"
                  style="width:260px">
            <Option v-for="(item, index) in typeCard"
                    :value="item.value"
                    :key="index">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="卡名称"
                  prop="name">
          <Input v-model="card.name"
                 style="width:260px"></Input>
        </FormItem>
        <!-- <FormItem label="卡价格"
                  prop="price">
          <InputNumber :min="1"
                       v-model="card.price"></InputNumber>
        </FormItem>
        <FormItem label="可用次数"
                  prop="cardCount"
                  v-if="card.type === 2">
          <InputNumber :min="1"
                       v-model="card.cardCount"></InputNumber>
        </FormItem> -->
      </Form>
    </Modal>
  </div>
</template>
<script>
import { cardList, addCard, updateCard, deleteCard } from '@/api/setting-course'
export default {
  data () {
    return {
      // 弹框
      addCardModel: false,
      loading: true,
      tableLoading: false,
      cardType: 0,
      card: {
        name: '',
        type: 1,
        varieties: 1,
        // price: '',
        cardCount: 0
      },
      typeCard: [{
        value: 1,
        label: '期限卡'
      }, {
        value: 2,
        label: '次数卡'
      }, {
        value: 3,
        label: '储值卡'
      }],
      varietiesCard: [
        {
          value: 1,
          label: '储值卡'
        }
      ],
      ruleValidate: {
        name: [{ required: true, message: '请输入卡名', trigger: 'blur' }],
        type: [
          { required: true, type: 'number', message: '请选择卡类型', trigger: 'change' }
        ],
        varieties: [
          { required: true, type: 'number', message: '请选择卡品种', trigger: 'change' }
        ],
        price: [{ required: true, type: 'number', message: '请输入会员卡价格', trigger: 'blur' }],
        cardCount: [{ required: true, type: 'number', message: '请输入可用次数', trigger: 'blur' }]
      },
      cardColumnsList: [],
      // 筛选条件
      formSearch: {
        name: '',
        type: null,
        varieties: null
      }
    }
  },
  mounted () {
    this.getCardList()
  },
  created () {
    // this.getCardList()
  },
  methods: {
    onAddCardModal (info) {
      this.addCardModel = true
      if (info) {
        this.cardType = 1
        this.card = { ...info }
      } else {
        this.cardType = 0
      }
    },
    getCardList () {
      this.tableLoading = true
      cardList(this.formSearch).then(res => {
        this.cardColumnsList = res.data
        console.log(this.cardColumnsList)
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onAddCardVisible (visible) {
      // 弹框状态改变 清除默认值
      if (visible) return
      this.$refs['cardform'].resetFields()
    },
    onCardSubmit () {
      this.$refs['cardform'].validate(valid => {
        // eslint-disable-next-line no-useless-return
        setTimeout(() => {
          this.loading = false
        }, 300)
        setTimeout(() => {
          this.loading = true
        }, 400)
        if (!valid) return
        this.cardType ? this.updateCard() : this.addCard()
      })
    },
    addCard () {
      addCard(this.card).then(res => {
        this.$refs['cardform'].resetFields()
        this.addCardModel = false
        this.$Message.success('添加成功')
        this.getCardList()
      })
    },
    updateCard () {
      updateCard(this.card).then(res => {
        this.$refs['cardform'].resetFields()
        this.addCardModel = false
        this.$Message.success('修改成功')
        this.getCardList()
      })
    }
  }
}
</script>
<style lang="less">
.margin-b-100 {
  margin-bottom: 100px;
}
.badge-wrap {
  display: inline-block;
  margin: 10px;
}
.course-badge {
  display: inline-block;
  padding: 5px 30px;
  background: #eee;
  border-radius: 6px;
  cursor: pointer;
}
</style>
